<script setup>
import { storeToRefs } from 'pinia'
import { ref } from 'vue'
import { useUserStore } from '@/stores/user'

const { userInfo } = storeToRefs(useUserStore())
const { setToken, setUserInfo } = useUserStore()

// 跳转单元格
const cellLinkList = [
  { title: '投诉记录', icon: '../../static/image/me/icon-2.jpg', route: '/pages/me/view/complain-list' },
  { title: '意见反馈', icon: '../../static/image/me/icon-3.jpg', route: '/pages/me/view/feedback-list' },
  { title: '我的收藏', icon: '../../static/image/me/icon-4.jpg', route: '/pages/me/view/my-collect' },
  { title: '物业服务', icon: '../../static/image/me/icon-5.jpg', route: '/pages/me/view/property-list' },
  { title: '材料申报', icon: '../../static/image/me/icon-6.jpg', route: '/pages/me/view/apply-material' },
  { title: '发票记录', icon: '../../static/image/me/icon-1.jpg', route: '/pages/me/view/invoice-list' },
]

function go(url) {
  uni.navigateTo({ url })
}

const confirmVisible = ref(false)
function onLogout() {
  setToken(null)
  setUserInfo(null)
  uni.showToast({ icon: 'success', title: '退出登录成功' })
}
</script>

<template>
  <main>
    <view>
      <view class="pl-7 pr-3.75 flex justify-between items-center">
        <view class="flex items-center">
          <image class="block h-120 w-120" src="../../static/image/me/default-avatar.png" />
          <view class="ml-2.5 text-28 text-white flex flex-col">
            <text>{{ userInfo?.realName }}</text>
            <text>{{ userInfo?.phone }}</text>
          </view>
        </view>
        <view class="text-28 text-white center" @click="go('/pages/me/view/my-detail')">
          <text>基本信息</text>
          <nut-icon name="right" size="14" />
        </view>
      </view>
    </view>
    <view class="mb-8.5">
      <nut-config-provider :theme-vars="{ cellColor: '#000', cellAfterBorderBottom: '1px solid #ccc' }">
        <nut-cell-group>
          <nut-cell
            v-for="item in cellLinkList"
            :key="item.name"
            :title="item.title"
            is-link
            @click="go(item.route)"
          >
            <template #icon>
              <view class="mr-2.5 center">
                <image class="h-36 w-36" :src="item.icon" />
              </view>
            </template>
          </nut-cell>
        </nut-cell-group>
      </nut-config-provider>
    </view>
    <view class="px-6.75">
      <nut-button block @click="confirmVisible = true">
        退出登录
      </nut-button>
    </view>
    <nut-dialog v-model:visible="confirmVisible" content="确认退出登录吗?" @ok="onLogout" />
  </main>
</template>
